<template>
  <div class="user-info-page">

    <el-card class="user-profile">
      <div class="user-avatar">
        <img :src="user.avatar" alt="User Avatar"/>
      </div>
      <div class="user-details">
        <h1>{{ user.name }}</h1>
        <p>Email:{{ user.email }}</p>
        <p>积分：{{ user.points }}</p>
      </div>
    </el-card>

    <el-card class="user-favourites">
      <h2>收藏的餐厅</h2>
      <el-table :data="user.favoriteRestaurants" style="width: 100%">
        <el-table-column prop="name" label="餐厅名称"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="rating" label="评分"></el-table-column>
      </el-table>
    </el-card>

    <el-card class="user-history">
      <h2>历史操作记录</h2>
      <el-timeline>
        <el-timeline-item 
          v-for="activity in user.history" 
          :key="activity.id" 
          :timestamp="activity.date"
        >
          {{ activity.type }}:{{ activity.details }}
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElCard, ElTable, ElTableColumn, ElTimeline, ElTimelineItem } from 'element-plus';

const user = ref({
  name: 'zc',
  email: 'zzc@666.com',
  points: 1200,
  avatar: 'src/static/111.jpg',
  favoriteRestaurants: [
    { id: 1, name: '花味烤肉', address: '苏宁广场7楼', rating: 4.5 },
    { id: 2, name: '东北菜馆', address: '中央城财富街', rating: 4.8 },
  ],
  history: [
    { id: 1, type: '评论', details: '评论了餐厅花味烤肉的菜品', date: '2024-05-20' },
    { id: 2, type: '收藏', details: '收藏了餐厅东北菜馆', date: '2024-05-18' },
  ]
});
</script>

<style scoped>
.user-info-page {
  background-color: aliceblue;
  width: 2048px;
  height: 1024px;
}

.user-profile {
  display: flex;
  align-items: center;
}

.user-avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.user-details h1 {
  margin: 0;
  font-size: 24px;
}

.user-favorites h2,
.user-history h2 {
  margin-bottom: 15px;
}

.el-card {
  margin-bottom: 20px;
}
</style>